<template>
  <div :class="showDetail ? 'container container-open' : 'container container-closed'">
    <header>
      <div v-show="showDetail" class="open-container">
        <span class="aili-font title">Koala</span>
        <MenuFoldIcon style="font-size: 25px" size="large" @click="showDetail = !showDetail"/>
      </div>
      <div v-show="!showDetail" class="close-container">
        <img style="width: 50px;" src="@/assets/logo/koala-logo.png" alt="">
        <MenuFoldIcon style="font-size: 25px" size="large" @click="showDetail = !showDetail"/>
      </div>
    </header>
    <div class="content">
    </div>
    <footer>
      <ul class="footer-container" v-if="showDetail">
        <li  @click="themeStore.changeTheme()">
          <ModeDarkIcon class="item-icon" />
          <button>切换主题色</button>
        </li>
        <li  @click="goSetting">
          <SettingIcon class="item-icon"/>
          <button>设置</button>
        </li>
      </ul>

      <ul v-else class="footer-container-close">
        <t-tooltip
            content="切换主题"
            placement="right"
            :overlay-style="{ width: '200px' }"
            show-arrow
        >
          <li  @click="themeStore.changeTheme()">
              <ModeDarkIcon class="item-icon-close"/>
          </li>
        </t-tooltip>
        <t-tooltip
            content="设置"
            placement="right"
            :overlay-style="{ width: '200px' }"
            show-arrow
        >
        <li @click="goSetting">
          <SettingIcon class="item-icon-close"/>
        </li>
        </t-tooltip>
      </ul>
    </footer>

  </div>
</template>
<script setup>
import {useThemeStore} from "@/store/theme/index.js";
const themeStore = useThemeStore();
import {ref} from "vue";
import {MenuFoldIcon, ModeDarkIcon, SettingIcon} from 'tdesign-icons-vue-next';
import { useRouter } from "vue-router";

const router = useRouter()
const showDetail = ref(true)

  const goSetting = () => {
    router.push("/setting");
  }

</script>


<style scoped>
.item-icon-close {
  font-size: 20px;
}

.footer-container-close li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  padding: 10px;
  border-radius: 50%;
}

.footer-container-close li:hover {
  background-color: var(--item-active-background);
}

.footer-container-close {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr;
  row-gap: 20px;
}

.item-icon {
  font-size: 18px;
  margin-right: 8px
}

.footer-container li {
  user-select: none;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  border-radius: 20px;
  transition: background-color 0.5s;
  box-sizing: border-box;
  padding: 0 20px;

  min-width: 150px;
}

.footer-container li:hover {
  background-color: var(--item-active-background);
}

.footer-container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  row-gap: 10px;
}

.open-container {
  height: 100px;
  display: flex;
  justify-content: space-between;
}

.close-container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 40px;
}

.title {
  font-size: 26px;
  color: var(--color);
}



header {
  color: var(--color);
}

.content {
  flex: 1;
  color: var(--color);
}

footer {
  height: 100px;

}

footer button {
  color: var(--color);
}

.container {
  height: 100%;
  background-color: var(--chat-history-background-color);
  color: var(--color);
  transition: 0.3s width ease-in-out;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px 10px;
}

.container-open {
  width: 270px;
}

.container-closed {
  width: 68px;
}
</style>
